<template>
  <div>
    <van-nav-bar title="地图找房" left-arrow @click-left="onClickLeft" />
    <baidu-map
      :zoom="zoom"
      :center="center"
      :scroll-wheel-zoom="true"
      class="bm-view"
      ak="YxXNc3f8NsL4Ws6QtRzrY1F9jCXYfycn"
      @ready="handler"
    >
    <!-- 比例尺 -->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!-- 圆形 -->
      <bm-circle
      v-for="(item,index) in houseMap" :key="index"
        :center="item"
        :radius="circlePath.radius"
        stroke-color="blue"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        @lineupdate="updateCirclePath"
        :editing="true"
      ></bm-circle>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmCircle, BmScale } from 'vue-baidu-map'
import { houseMapAPI } from '@/api'
export default {
  components: {
    BaiduMap, BmCircle, BmScale
  },
  data () {
    return {
      center: localStorage.getItem('city'),
      id: localStorage.getItem('newCityCode'),
      houseMap: [],
      zoom: 12,
      // 圆形
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915
        },
        radius: 500
      }
    }
  },
  async created () {
    const res = await houseMapAPI({ id: this.id })
    console.log(res)
    this.houseMap = res.data.body.map(item => item.coord)
    console.log(this.houseMap)
  },
  methods: {
    onClickLeft () {
      this.$router.replace({
        path: '/layout/home'
      })
    },
    handler ({ BMap, map }) {
      console.log(BMap, map)
      // this.center.lng = 116.404
      // this.center.lat = 39.915
      this.zoom = 15
    },
    updateCirclePath (e) {
      this.circlePath.center = e.target.getCenter()
      this.circlePath.radius = e.target.getRadius()
    }
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 624px;
}
</style>
